<template>
  <el-dialog
    :close-on-click-modal="false"
    :title="title"
    :visible.sync="visible"
    @close="close"
  >
    <el-form ref="form" :model="form" label-width="auto">
      <el-form-item
        label="应用名称："
        prop="name"
        :rules="{
          required: true,
          message: '请输入应用名称'
        }"
      >
        <el-input
          v-model="form.name"
          placeholder="请输入应用名称"
        />
      </el-form-item>
      <el-form-item
        label="应用类型："
        prop="type"
        :rules="{
          required: true,
          message: '请选择应用类型'
        }"
      >
        <el-select
          v-model="form.type"
          filterable
          placeholder="请选择应用类型"
        >
          <el-option
            v-for="item in typeList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button :loading="loading" type="primary" @click="confirm">
        确 定
      </el-button>
    </div>
  </el-dialog>
</template>
<script>
import axios from 'axios';
import { getToken } from '@/utils/auth';
export default {
  components: {},
  props: {
    currentItem: {
      type: Object,
      required: false,
      default: () => {
        return null
      }
    },
    value: {
      type: Boolean,
      default: false
    },
    typeList: {
      type: Array,
      required: false,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      formDefault: {
        name: '',
        type: ''
      },
      form: {},
      visible: false,
      loading: false
    }
  },
  computed: {
    title() {
      return this.currentItem ? '编辑应用' : '新增应用'
    },
    databaseName() {
      return getToken('databaseName');
    }
  },
  watch: {
    value(v) {
      this.visible = v
      if (v) {
        this.init()
      }
    }
  },
  created() {
    this.reset()
  },
  methods: {
    reset() {
      this.form = { ...this.formDefault }
      this.$refs.form && this.$refs.form.resetFields()
    },
    init() {
      const { currentItem, form } = this
      if (currentItem) {
        Object.keys(form).forEach(key => {
          if (currentItem.hasOwnProperty(key)) {
            form[key] = currentItem[key]
          }
        })
      }
    },
    // 关闭
    close() {
      setTimeout(() => {
        this.reset()
      }, 250)
      this.$emit('close')
    },
    // 取消
    cancel() {
      this.$emit('input', false)
    },
    // 确认
    confirm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          const { form, currentItem } = this
          const url = currentItem === null ? 'add' : 'edit'
          const paylod = JSON.parse(JSON.stringify(form))
          if (currentItem !== null) {
            paylod.id = currentItem.id
          }
          this.loading = true
          axios({
            method: 'post',
            url: this.$webSerUrlPro + 'config/project/' + url,
            headers: {
              databaseName: this.databaseName
            },
            data: paylod
          }).then(res => {
            if (res.data.code === 1) {
              this.$message({
                type: 'success',
                message: res.data.msg
              })
              this.close()
              this.$emit('reflash')
            }
          }).finally(() => {
            this.loading = false
          })
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.el-form-item{
  width: 100%;
}
.el-select{
  width: 100%;
}
</style>

